import { camera, controls, scene } from './utils/init'
import * as THREE from 'three'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { guiMove } from './utils/gui'
console.log(guiMove, 'guiMove');

function initBase() {
  new GLTFLoader  ().load('model/ferrari.glb', (gltf) => {
    const model = gltf.scene
    model.traverse(obj => {
      if (obj.name === 'Object_3') {
        obj.material.color = new THREE.Color(0xff00ff)
      }
    })
    scene.add(model)
  })
}

function createLight () {
    const light = new THREE.AmbientLight(0xffffff)
    scene.add(light)
    // 高级材质，用环境光无法照亮，要用其他光源，为什么？环境光只能照亮普通的材质，高级的材质不反环境光，不反，没有方向的光
    // 高级材质的表面的属性更加的复杂
    const direction = new THREE.DirectionalLight(0xffffff, 2)
    direction.position.set(2, 3, 2)
    scene.add(direction)
    const helper = new THREE.DirectionalLightHelper(direction, .5)
    scene.add(helper)
}

initBase()
createLight()

// 通过监听轨道控制器的change事件，判断摄像机此时的位置，和摄像机此时的朝向
controls.addEventListener('change', () => {
  console.log(camera.position, 'camera.position');
  console.log(controls.target, 'controls.position');
})

// 双击切换视角，摄像机的位置也可以进行更换
window.addEventListener('dblclick',  () => {
  camera.position.set(0.30, 1.24, -0.60)
  // 影响轨道控制器观察的目标位置（聚焦点）-> 影响摄像机查看的角度，会覆盖摄e像机的lookat
  // controls.target是控制器的焦点，控制器围绕着他运行
  // Vector3是一个三维向量，表示三维空间中的一个点  
  controls.target = new THREE.Vector3(0.29, 0.98, 0.51)
})